<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <p id="p1" v-red>自定义指令</p>
        <h5 id="p2" v-red>自定义指令</h5>
        <br>
        <p id="p3" v-red v-max>自定义指令 局部指令</p>
        <p id="p3" v-red v-orange>自定义指令 局部指令</p>
    </div>
    <script>
        // 全局事件
        Vue.directive('red', {
            // 指令的定义， 指令的实现
            inserted: function(el, binding) {
                // el 就是被指定了自定义事件的标签，此处就是id为p1的p标签
                console.log(el);
                //
                el.style.color = 'red';
                //
                console.log(binding);
            },
            //绑定一个钩子函数  bind只调用一次
            bind: function(el) {
                console.log(1);
            }
        });
        //自定义vue对象
        new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            //局部指令
            directives: {
                max: { //max 指令的名字
                    inserted: function(el) {
                        el.style.fontSize = '30px';
                    }
                },
                orange: {
                    inserted: function(el) {
                        el.style.background = 'orange';
                    }
                }
            }
        });
    </script>
</body>

</html>